<!--  -->
<template>
    <div class=''>
        <el-dialog :title="title" :visible.sync="personVisible" width="30%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name" :disabled="title == '查看' ? true : false"></el-input>
                </el-form-item>
                <el-form-item label="学号" prop="studentId">
                    <el-input v-model="ruleForm.studentId" :disabled="title == '查看' ? true : false"></el-input>
                </el-form-item>
                <el-form-item label="班级" prop="class">
                    <el-input v-model="ruleForm.class" :disabled="title == '查看' ? true : false"></el-input>
                </el-form-item>
                <el-form-item label="是否在校" prop="isShool">
                    <el-switch v-model="ruleForm.isShool" :disabled="title == '查看' ? true : false"></el-switch>
                </el-form-item>
                <el-form-item label="入学时间" prop="afterTime">
                    <el-date-picker v-model="ruleForm.afterTime" type="date" placeholder="选择日期"
                        :disabled="title == '查看' ? true : false"></el-date-picker>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="personVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {

    },
    props: {
        visible: {
            type: Boolean,
        },
        title: {
            default: '新增',
        },
        fatherInfo: {
            default: {
                name: '',
                studentId: '',
                class: '',
                afterTime: '',
                isShool: true,
            },

        }
    },
    data() {
        //这里存放数据
        return {
            ruleForm: {
                name: '',
                studentId: '',
                class: '',
                afterTime: '',
                isShool: true,
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: "blur" }
                ],
                studentId: [
                    { required: true, message: '请输入学号', trigger: "blur" }
                ],
                class: [
                    { required: true, message: '请输入班级', trigger: "blur" }
                ],
                afterTime: [
                    { required: true, message: '请选择时间', trigger: "blur" }
                ],
                isShool: [
                    { required: true, message: '请选择', trigger: "blur" }
                ],
            }
        };
    },
    //监听属性 类似于data概念
    computed: {
        personVisible: {
            get() {
                return this.visible;
            },
            set(val) {
                this.$refs.ruleForm.resetFields();
                this.$emit("updateVisible", val);
            },
        },
    },
    //监控data中的数据变化
    watch: {
        fatherInfo: {
            handler(val) {
                if (val) {
                    this.ruleForm = val
                } else {
                    this.ruleForm = {
                        name: '',
                        studentId: '',
                        class: '',
                        afterTime: '',
                        isShool: true,
                    }
                }
            },
            // immediate:true
        },
    },
    //方法集合
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.title == '新增') {
                        console.log(this.ruleForm, 'add');
                        this.addDate(this.ruleForm)
                    } else {
                        console.log(this.ruleForm, 'edit');
                        this.editDate(this.ruleForm)
                    }
                } else {
                    console.log("error submit");
                    return false
                }
            })
        },
        addDate(data) {
            console.log(data);
            this.$request.post('http://localhost:3003/personnel', data).then((res) => {
                console.log(res);
                if (res.status == 201) {
                    this.$message.success('添加成功')
                    this.$emit('updateVisible', false);
                    this.$emit('update');
                } else {
                    this.$message.success('添加失败')
                }
            })
        },
        editDate(data) {
            this.$request.put(`http://localhost:3003/personnel/${data.id}`, data).then((res) => {
                console.log(res);
                if (res.status == 200) {
                    this.$message.success('编辑成功')
                    this.$emit('updateVisible', false);
                    this.$emit('update');
                } else {
                    this.$message.success('编辑失败')
                }
            })
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='' scoped>

</style>